<template>
  <div class="mb24 flex-center-between">
    <div class="bgc-white br4" style="flex: 1">
      <div class="pv16 ph24 flex-center pointer" @click="handleClick('all', 1)">
        <img src="./images/overview_all.png" style="width: 40px; height: 40px" />
        <div class="ml12">
          <div style="color: rgba(118, 120, 133, 1); line-height: 14px">全部合同</div>
          <div class="mt8 fs24 fw500" style="color: rgba(85, 86, 93, 1); line-height: 24px">{{ summary.allCount || 0 }}</div>
        </div>
      </div>
      <div class="ph24 pointer" style="border-top: 1px solid rgba(232, 232, 232, 1); line-height: 32px" @click="handleClick('all', 2)">
        <span class="fs12 mr4" style="color: rgba(166, 168, 180, 1)">即将到期</span>
        <span class="tc-theme fs12">{{ summary.willExpireCount }}</span>
      </div>
    </div>
    <div class="bgc-white br4 ml24 pointer" style="flex: 1; min-height: 112px" @click="handleClick('paper', 4)">
      <div class="pv16 ph24 flex-center">
        <img src="./images/overview_paper.png" style="width: 40px; height: 40px" />
        <div class="ml12">
          <div style="color: rgba(118, 120, 133, 1); line-height: 14px">纸质合同</div>
          <div class="mt8 fs24 fw500" style="color: rgba(85, 86, 93, 1); line-height: 24px">{{ summary.paperCount || 0 }}</div>
        </div>
      </div>
    </div>
    <div class="bgc-white br4 ml24" style="flex: 1; min-width: 350px; flex-shrink: 0">
      <div class="pv16 ph24 flex-center" style="cursor: pointer" @click="handleClick('electronic', 4)">
        <img src="./images/overview_electronic.png" style="width: 40px; height: 40px" />
        <div class="ml12">
          <div style="color: rgba(118, 120, 133, 1); line-height: 14px">电子合同</div>
          <div class="mt8 fs24 fw500" style="color: rgba(85, 86, 93, 1); line-height: 24px">{{ summaryEle.allContractCount || 0 }}</div>
        </div>
      </div>
      <div class="ph24 flex-center" style="border-top: 1px solid rgba(232, 232, 232, 1); line-height: 32px">
        <div class="mr16" style="cursor: pointer" @click="handleClick('electronic', 1)">
          <span class="fs12 mr4" style="color: rgba(166, 168, 180, 1)">待员工签署</span>
          <span class="tc-theme fs12">{{ summaryEle.toSignedByEmpCount }}</span>
        </div>
        <div class="mr16" style="cursor: pointer" @click="handleClick('electronic', 2)">
          <span class="fs12 mr4" style="color: rgba(166, 168, 180, 1)">待公司签署</span>
          <span class="tc-theme fs12">{{ summaryEle.toSignedByComCount }}</span>
        </div>
        <div>
          <span class="fs12 mr4" style="color: rgba(166, 168, 180, 1); cursor: pointer" @click="handleClick('electronic', 3)"
            >签署完成</span
          >
          <span class="tc-theme fs12">{{ summaryEle.signedCompleteCount }}</span>
        </div>
      </div>
    </div>
    <div
      class="br8 ml24 bgc-theme flex-center"
      style="width: 280px; flex-shrink: 0; min-height: 112px; background-image: url(./images/bg.png)"
    >
      <div class="pv16 ph24 flex-center">
        <img src="./images/overview_left.png" style="width: 31px; height: 36px" />
        <div class="ml12">
          <div class="tc-white" style="line-height: 14px">电子合同余额（份）</div>
          <div class="mt8 fs24 tc-white fw500" style="line-height: 24px">{{ summaryEle.quotaRemain || 0 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { selectElectronicAndPaperNumberReq, getContractCountBySubjectIdsReq } from "../api";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      summary: {},
      summaryEle: {},
      loading: false
    };
  },
  computed: {
    ...mapState(["site", "hr"]),
    targetIds() {
      if (this.site.selectAllIds && this.site.selectAllIds !== "-1") {
        return this.site.selectAllIds.split(",");
      }
      return [];
    }
  },
  watch: {
    targetIds: {
      handler(newVal) {
        if (newVal.length > 0) {
          this.loadData();
        }
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    async loadData() {
      if (this.loading) {
        return false;
      }
      this.loading = true;
      await selectElectronicAndPaperNumberReq(this.targetIds)
        .then((res) => {
          if (res && res.data) {
            this.summary = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
      await getContractCountBySubjectIdsReq({ subjectIds: this.targetIds })
        .then((res) => {
          if (res && res.data) {
            this.summaryEle = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.loading = false;
    },
    handleClick(tab, value) {
      this.$emit("selectChange", tab, value);
    }
  }
};
</script>
<style lang="scss"></style>
